<template>
    <el-menu 
      :default-active="defaultPath" 
      router 
      class="el-menu-vertical-demo"
    >
      <!-- 首页 -->
      <el-menu-item index="/main/index">
        <template #title>
          <el-icon><House /></el-icon>
          <span>首页</span>
        </template>
      </el-menu-item>
  
      <!-- 试卷库 -->
      <el-sub-menu index="paper">
        <template #title>
          <el-icon><Folder /></el-icon>
          <span>试卷库</span>
        </template>
        <el-menu-item index="/main/paper/create">
          <el-icon><DocumentAdd /></el-icon>
          <span>创建试卷</span>
        </el-menu-item>
        <el-menu-item index="/main/paper/list">
          <el-icon><List /></el-icon>
          <span>试卷列表</span>
        </el-menu-item>
      </el-sub-menu>
  
      <!-- 试题库 -->
      <el-sub-menu index="question">
        <template #title>
          <el-icon><Collection /></el-icon>
          <span>试题库</span>
        </template>
        <el-menu-item index="/main/question/bank">
          <el-icon><Files /></el-icon>
          <span>题库管理</span>
        </el-menu-item>
        <el-menu-item index="/main/question/manage">
          <el-icon><EditPen /></el-icon>
          <span>试题管理</span>
        </el-menu-item>
      </el-sub-menu>
  
      <!-- 学习库 -->
      <el-sub-menu index="learn">
        <template #title>
          <el-icon><Reading /></el-icon>
          <span>学习库</span>
        </template>
        <el-menu-item index="/main/learn/manage">
          <el-icon><Notebook /></el-icon>
          <span>学习管理</span>
        </el-menu-item>
        <el-menu-item index="/main/learn/message">
          <el-icon><Promotion /></el-icon>
          <span>群发消息</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </template>
  
  <script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import {
    House,
    Folder,
    DocumentAdd,
    List,
    Collection,
    Files,
    EditPen,
    Warning,
    Reading,
    Notebook,
    Promotion
} from '@element-plus/icons-vue'

const route = useRoute()
// 修改 defaultPath 的计算属性，确保正确匹配当前路由
const defaultPath = computed(() => {
    return route.path
})
</script>

<style lang="scss" scoped>
.el-menu {
    border-right: none;
    background-color: #f5f7fa !important;
    
    :deep(.el-menu-item),
    :deep(.el-sub-menu__title) {
        background-color: #f5f7fa !important;
        color: #333;
    }

    :deep(.el-menu-item:hover),
    :deep(.el-sub-menu__title:hover) {
        background-color: #e6f1ff !important;
    }

    :deep(.el-menu-item.is-active) {
        background-color: #e6f1ff !important;
        color: #409EFF;
    }

    :deep(.el-sub-menu.is-active > .el-sub-menu__title),
    :deep(.el-sub-menu.is-opened > .el-sub-menu__title) {
        background-color: #e6f1ff !important;
        color: #409EFF !important;
    }

    :deep(.el-sub-menu .el-menu-item) {
        background-color: #f5f7fa !important;
        color: #333;
    }

    :deep(.el-sub-menu .el-menu-item.is-active) {
        background-color: #e6f1ff !important;
        color: #409EFF;
    }
}
</style>